<template>
  <section class="editBelowOrdCar">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      :title="textMap[popupsState]"
      width="50%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />
      <!-- 显示按钮的onetabel -->
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObj"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { formMixins } from '@/components/wms/mixins/formMixins'
import dialogHeader from '@/components/dialogHeader'
import api from '@/api/se/apiBaseData'
export default {
  components: {
    dialogHeader
  },
  // 组件混入对象
  mixins: [formMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    popupsState: {
      type: String,
      default: 'add'
    },
    dynamicEditRowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      PopupsVisible: false,
      // 标题
      textMap: {
        edit: '班组编辑',
        add: '班组新增'
      },
      // 动态组件-按钮
      tableButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
            {
              compKey: 'btnKey1',
              type: 'primary',
              size: 'small',
              icon: 'iconfont  icon-preservation',
              clickEvent: () => this.save(),
              text: '保存'
            },
            {
              compKey: 'btnKey2',
              size: 'small',
              icon: 'iconfont icon-preservatio',
              clickEvent: () => this.closeEdit(),
              text: '取消' // 取消
            }
          ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '班组编号：',
              codeField: 'workGroupCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              isRequire: true,
              span: 12
            },
            {
              compKey: 'compKey2',
              labelName: '班组名称：',
              codeField: 'groupName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              isRequire: true,
              span: 12
            },
            {
              compKey: 'compKey3',
              labelName: '班组类别：',
              codeField: 'workGroupType',
              component: () => import('@/components/org/LookupValue'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '1', statusText: '机电班组' },
                { statusId: '2', statusText: '钣喷班组' },
                { statusId: '3', statusText: '质检班组' },
                { statusId: '4', statusText: '清洁班组' }
              ],
              type: 'dropdownList',
              isMust: true,
              isRequire: true,
              span: 12
            }
          ],
      formField: {
        workGroupType: '',
        groupName: '',
        workGroupCode: '',
        repairGroupId: '',
        updateControlId: ''
      }
    }
  },
  watch: {
    popupsState(val, old) {
      if (val == 'edit') {
        this.tableComponents[0].disabled = true
        this.tableComponents[0].compKey = this.tableComponents[0].compKey+"1"
        this.formField = { ...this.dynamicEditRowData }
      } else {
        this.tableComponents[0].disabled = false
        this.tableComponents[0].compKey = this.tableComponents[0].compKey+"1"

      }
    }
  },
  methods: {
    // showEdit() {
    //   this.PopupsVisible = true;
    // },
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },
    // 新增/编辑保存按钮
    save() {
      const that = this
      this.$utils.validataMoth(this, 'validpopup')
      if (this.valid) {
        if (that.popupsState === 'edit') {
          that.editSave()
        } else {
          that.addSave()
        }
      }
    },
    // 编辑保存
    editSave() {
      const that = this
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: api.updateTeam,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: that.formField
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === '1') {
          this.$message({
            message: this.$t('sys.tips.esTip5') /* 保存成功*/,
            type: 'success',
            duration: 1000
          })
          this.closeEdit()
        } else {
          // 保存失败
          this.$message({
            message: '保存失败:' + response.msg,
            type: 'warn',
            duration: 1000
          })
        }
        this.popupsVisible = false
      })
    },
    // 新增保存
    addSave() {
      const that = this
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: api.addTeam,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: that.formField
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === '1') {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1000
          })
          this.closeEdit()
        } else {
          // 保存失败
          this.$message({
            message: '添加失败:' + response.msg,
            type: 'warn',
            duration: 1000
          })
        }
        this.popupsVisible = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
/deep/ .el-dialog {
  margin-top: 5rem !important;
}
</style>
